<script lang="ts" setup>
import {useGetBusinessOrderApi} from "@/services/api";
import {useStore} from "vuex";
import {ref} from "vue";
import type {BusinessOrders} from "@/interfaces/order";
import {onLoad} from "@dcloudio/uni-app";

const store = useStore()
const list = ref<string[]>(['全部订单', '未付款', '待收货', '已完成', '退款'])
const data = ref<BusinessOrders[]>([])
const init = async () => {
  try {
    const {data: res} = await useGetBusinessOrderApi({userId: store.getters["auth/getUserId"]})
    data.value = res || []
  } finally {

  }
}
onLoad(() => {
  init()
})
</script>

<template>
  <view class="container">
    <view v-for="(order,index) in data" :key="index" class="order">
      <view class="order-id">订单号:{{ order.id }}</view>
      <view class="order-info">
        <view class="image">
          <up-image :show-loading="true" :src="order.images.split(';')[0]" height="120px" width="120px"></up-image>
        </view>
        <view class="order-text">
          <view>
            <up-text :text="order.goodsName" lines="2" size="30"></up-text>
          </view>
          <view>￥{{ order.price }}</view>
        </view>
      </view>
      <view class="status">{{ list[order.status] }}</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;

  .order {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #cccccc;
    padding: 12px;
    position: relative;
    gap: 12px;

    .order-info {
      display: flex;
      flex-direction: row;
      gap: 12px;

      .order-text {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
    }

    .status {
      position: absolute;
      right: 12px;
      bottom: 12px;
    }
  }

}
</style>